<template>
	<view class="">
		<view class="formlist">
			<u-form :model="form" ref="uForm">
				<u-form-item border-bottom label-width="150rpx" label="公司名称" prop="company">
					<u-input placeholder="请输入公司名称" v-model="form.company" />
				</u-form-item>
				<u-form-item border-bottom label-width="150rpx" label="公司地址" prop="address">
					<view class="addressInput">
						<u-input placeholder="请输入或点击图标自动获取地址" v-model="form.address" />
					</view>
					<text @click="getLocation" class="iconfont icon-weizhi1 addressGet"></text>
				</u-form-item>
				<u-form-item border-bottom label-width="150rpx" label="公司部门" prop="department">
					<u-input placeholder="请输入公司部门" v-model="form.department" />
				</u-form-item>
				<u-form-item border-bottom label-width="150rpx" label="个人名字" prop="linkman">
					<u-input placeholder="请输入个人名字" v-model="form.linkman" />
				</u-form-item>
				<u-form-item border-bottom label-width="150rpx" label="联系方式" prop="phone">
					<u-input type='number' maxlength='11' placeholder="请输入手机号或座机号" v-model="form.phone" />
				</u-form-item>
			</u-form>
			<u-button @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				openId: '',
				modifyId: '',
				form: {
					company: '',
					department: '',
					linkman: '',
					phone: '',
					address: '',
					modifyId: 0
				},
				rules: {
					company: [{
						required: true,
						message: '请输入公司名称',
						trigger: ['blur', 'change']
					}],
					department: [{
						required: true,
						message: '请输入公司部门',
						trigger: ['blur', 'change']
					}],
					linkman: [{
						required: true,
						message: '请输入个人姓名',
						trigger: ['blur', 'change']
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								let regexp1 =
									/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
								let regexp2 =
									/((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/;
								let result1 = regexp1.test(value);
								let result2 = regexp2.test(value);
								console.log(result1);
								console.log(result2 + '座机号判断');
								return result1 || result2;
							},
							message: '手机号码或固话输入不正确',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}
					],
					address: [{
						required: true,
						message: '请输入公司地址',
						trigger: ['blur', 'change']
					}]
				}
			};
		},
		onLoad(option) {
			console.log(option);
			this.flag = option.showId;
			this.form.address = option.address;
			this.form.company = option.company;
			this.form.department = option.department;
			this.form.linkman = option.linkman;
			this.form.phone = option.phone;
			this.form.modifyId = parseInt(option.modifyId);
			this.modifyId = parseInt(option.modifyId);
			this.openId = uni.getStorageSync('openId');
		},
		methods: {
			//提交
			submit() {
				let that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log(that.form);
						console.log('验证通过');
						if (that.flag) {
							//修改信息
							that.modifyInfo(that.form);
						} else {
							// 新增信息
							that.addInfo();
						}
					} else {
						console.log('验证失败');
					}
				});
			},
			//修改信息
			modifyInfo() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要修改了吗？',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								url: 'https://zioncloud.top/repair/contact/update',
								method: 'POST',
								name: 'modify',
								header: {
									"Content-Type": "application/json"
								},
								data: {
									contactId: that.modifyId,
									openId: that.openId,
									company: that.form.company,
									department: that.form.department,
									address: that.form.address,
									phone: that.form.phone,
									linkman: that.form.linkman,
								},
								success(res) {
									console.log(res);
									console.log('成功修改了？');
									uni.showToast({
										title: '您已经成功修改了信息！',
										duration: 1000
									});
								}
							})
							console.log('用户点击确定');
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


			},
			//新增信息
			addInfo() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要提交了吗？',
					success(res) {
						if (res.confirm) {
							uni.request({
								url: 'https://zioncloud.top/repair/contact/new',
								name: 'serverinfo',
								method: "POST",
								header: {
									"Content-Type": "application/json"
								},
								data: {
									openId: that.openId,
									company: that.form.company,
									department: that.form.department,
									address: that.form.address,
									phone: that.form.phone,
									linkman: that.form.linkman,
								},
								success(res) {
									console.log(res);
									uni.showToast({
										title: '您已经成功添加信息！',
										duration: 1000
									});
									setTimeout(function() {
										uni.navigateBack({
											delta: 1
										})
									}, 1000)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			//获取地址
			// that.form.address=res.address;
			getLocation(){
				let that = this;
				uni.chooseLocation({
				    success: (res) =>{
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
						this.latitude = res.latitude
						this.longitude = res.longitude
						that.form.address = res.address
				    },
					fail: () => {
							// 获取用户当前授权设置
							uni.getSetting({
								success: function(res) {
									var statu = res.authSetting;
									console.log(statu);
									if (!statu['scope.userLocation']) {
										console.log(123);
										uni.showModal({
											title: '是否授权当前位置',
											content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
											success(tip) {
												if (tip.confirm) {
													// 打开用户授权设置
													uni.openSetting({
														success: function(data) {
															if (data.authSetting["scope.userLocation"] === true) {
																uni.showToast({
																	title: '授权成功',
																	icon: 'success',
																	duration: 1000
																})
																//授权成功之后，再调用chooseLocation选择地方
																setTimeout(function() {
																	uni.chooseLocation({
																		success: (data) => {
																			console.log('位置名称：' + data.name);
																			console.log('详细地址：' + data.address);
																			console.log('纬度：' + data.latitude);
																			console.log('经度：' + data.longitude);
																			this.latitude = data.latitude
																			this.longitude = data.longitude
																			that.form.address = data.address
																		}
																	})
																}, 1000)
															}
														}
													})
												} else {
													wx.showToast({
														title: '授权失败',
														icon: 'none',
														duration: 1000
													})
												}
											}
										})
					 
									}
								}
							})
						}
				});
			},


		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>
<style>
	.formlist {
		margin: 0 50rpx 0 30rpx;
	}
	.addressInput{
		width:90%;
		float: left;
	}
	.addressGet{
		float: right;
		font-size: 45rpx;
		font-weight: 700;
	}
</style>
